import type { RouteRecordRaw } from 'vue-router';

export const cssEllipsis: RouteRecordRaw = {
    path: "/cssEllipsis",
    name: 'cssEllipsis',
    meta: {
        title: "cssEllipsis"
    },
    component: () => import('@/views/css-demos/css-ellipsis/index.vue')
}

export const cssDemo01: RouteRecordRaw = {
    path: "/css-demos-01",
    name: 'css-demos-01',
    meta: {
        title: "文本鼠标悬浮"
    },
    component: () => import('@/views/css-demos/demo01/index.vue')
}
export const cssDemo02: RouteRecordRaw = {
    path: "/css-demos-02",
    name: 'css-demos-02',
    meta: {
        title: "文字溶解动画"
    },
    component: () => import('@/views/css-demos/demo02/index.vue')
}
export const cssDemo03: RouteRecordRaw = {
    path: "/css-demos-03",
    name: 'css-demos-03',
    meta: {
        title: "CSS鼠标上下滚动内容左右滚动"
    },
    component: () => import('@/views/css-demos/demo03/index.vue')
}
export const cssDemo04: RouteRecordRaw = {
    path: "/css-demos-04",
    name: 'css-demos-04',
    meta: {
        title: "Grid布局正向旋转动画"
    },
    component: () => import('@/views/css-demos/demo04/index.vue')
}
export const cssDemo05: RouteRecordRaw = {
    path: "/css-demos-05",
    name: 'css-demos-05',
    meta: {
        title: "C3-3D盒子过度效果"
    },
    component: () => import('@/views/css-demos/demo05/index.vue')
}
export const cssDemo06: RouteRecordRaw = {
    path: "/css-demos-06",
    name: 'css-demos-06',
    meta: {
        title: "利用延迟实现复杂动画"
    },
    component: () => import('@/views/css-demos/demo06/index.vue')
}


export const FLIP: RouteRecordRaw = {
    path: "/css-FLIP",
    name: 'css-FLIP',
    meta: {
        title: "FLIP动画"
    },
    component: () => import('@/views/css-demos/FLIP/index.vue')
}


export const windowHover: RouteRecordRaw = {
    path: "/window-hover",
    name: 'window-hover',
    meta: {
        title: "鼠标悬浮window10日历效果"
    },
    component: () => import('@/views/css-demos/window-hover/index.vue')
}

export const codeRain: RouteRecordRaw = {
    path: "/canvas-codeRain",
    name: 'canvas-codeRain',
    meta: {
        title: "代码雨"
    },
    component: () => import('@/views/canvas-demos/codeRain/index.vue')
}


export const pathAni: RouteRecordRaw = {
    path: "/pathAni",
    name: 'pathAni',
    meta: {
        title: "pathAni"
    },
    component: () => import('@/views/css-demos/pathAni/index.vue')
}

export const Scss: RouteRecordRaw = {
    path: "/Scss",
    name: 'Scss',
    meta: {
        title: "Scss"
    },
    component: () => import('@/views/css-demos/scss/index.vue')
}


export const cssDemos:RouteRecordRaw = {
    path:'/css-demos',
    name:'css-demos',
    meta:{
        title:'CSS效果和canvas'
    },
    children:[
        cssEllipsis,
        cssDemo01,
        cssDemo02,
        cssDemo03,
        cssDemo04,
        cssDemo05,
        cssDemo06,
        FLIP,
        windowHover,
        codeRain,
        pathAni,
        Scss
    ]
}

export default cssDemos;